<template>
  <view class="viewport">
    <view class="top_container">
      <view class="search_container">
        <input class="search_input" inputmode="search" confirm-type="search" placeholder="点击搜索主题" v-model="fileName"
          @confirm="search" />
      </view>
    </view>


    <view class="item-container">
      <view class="nodata" v-if="datalist.length==0 &&!isLoading">
        <image class="no_data_img" src="../../static/images/blank.png"></image>
        <text class="no_data_text">暂无数据</text>
      </view>
      <view v-else v-for="(item,index) in datalist" class="case-item" @click="itemClick(item)" @longpress="onLongPress">
        <view class="image_container">
          <image class="image_good"
            src="https://assistant-dev.huidait.com/paas/shop/728243877368496147//ef89c48398cd4fb9b3d21b965d1a1719.jpg">
          </image>
          <view class="tag">HUIDA 惠达</view>
        </view>
        <view class="item-right">
          <view class="right-container_title">
            <view class="good_name">{{item.rsResourceGoodsReDomain.goodsName}}</view>
          </view>
          <view class="right-container">
            <view class="right-title">分类</view>
            <view class="right-content">{{item.rsResourceGoodsReDomain.classtreeName}}</view>
          </view>
          <view class="right-container">
            <view class="right-title">品牌</view>
            <view class="right-content">{{item.rsResourceGoodsReDomain.brandName}}</view>
          </view>
          <view class="right-container">
            <view class="right-title">规格</view>
            <view class="right-content">{{item.rsResourceGoodsReDomain.skuName|| '暂无'}}</view>
          </view>
          <view class="right-container">
            <view class="right-title">指导价</view>
            <view class="right-content">{{item.rsResourceGoodsReDomain.pricesetAsprice}}</view>
          </view>
        </view>

      </view>

    </view>
  </view>
</template>
s
<script setup lang="ts">
  import { getProductList } from '@/services/home'

  import { queryFileCollectPage, deleteFileCollectByCode } from '@/services/collect'
  import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import { ref } from 'vue'
  import { getClasstree } from '@/services/file';
  import Func from '@/utils/func';
  import { useMemberStore } from '@/stores';


  const userInfo : any = useMemberStore().getUserInfo()
  const screenList1 = ref<any>([])
  const screenList2 = ref<any>([])
  const screenList3 = ref<any>([])

  // 一级分类
  const firstClass = ref<any>([])
  // 二级分类
  const secondClass = ref<any>([])

  const firstClassCode = ref('');
  const secondClassCode = ref('');
  const thirdClassCode = ref('');

  let total = -1;
  let page = 1
  const rows = 10
  const dataStateStr = '0,2,3,4'
  const classtreeCode = '931858382661976162'
  const goodsName = ref('')
  const channelName = ref('')
  const isLoading = ref(true)

  const datalist = ref<any[]>([])//数据源

  onLoad(() => {
    getClasstree({ goodsClass: 'B2B' }).then((res : any) => {

      if (Func.notEmpty(res)) {
        res.forEach((e : any) => {
          console.log(e)
          screenList1.value.push({
            text: e.classtreeName,
            value: e.classtreeCode
          })
        })
      }
      // 一级分类集合
      firstClass.value = res;
    })
    getData(true)
  })

  //下拉刷新
  onPullDownRefresh(() => {
    getData(true)
  })
  //到底触发 上拉加载
  onReachBottom(() => {
    if (total != -1 && datalist.value.length >= total) {
      uni.showToast({
        title: '已加载完全部',
        icon: 'none',
      })
      return
    }
    getData(false)
  })
  //搜索
  const search = () => {
    getData(true);
  }


  // 一级分类变化
  const firstClassChange = (val : any) => {
    firstClassCode.value = val;
    // 每次一级分类变化要清空二级分类，重新获取
    screenList2.value = []
    screenList3.value = []
    const children2 = getChildrenByCode(firstClass.value, val);
    console.log(children2)
    if (Func.notEmpty(children2)) {
      children2.forEach(e => {
        screenList2.value.push({
          text: e.classtreeName,
          value: e.classtreeCode
        })
      })
      secondClass.value = children2
    }
    // change方法
    getData(true)
  }

  //二级分类变化
  const secondClassChange = (val : any) => {
    secondClassCode.value = val;

    screenList3.value = []
    const children3 = getChildrenByCode(secondClass.value, val);
    console.log(children3)
    if (Func.notEmpty(children3)) {
      children3.forEach(e => {
        screenList3.value.push({
          text: e.classtreeName,
          value: e.classtreeCode
        })
      })
    }
    // change方法
    getData(true)
  }
  /**
   * 点击三级分类
   */
  const thirdClassChange = (val : any) => {
    thirdClassCode.value = val
    getData(true)
  }

  function getChildrenByCode(classTrees : any[], classtreeCode : string) : any[] {
    console.log(classTrees, classtreeCode)
    const foundItem = classTrees.find(item => item.classtreeCode === classtreeCode);
    return foundItem ? foundItem.childList : [];
  }
  /**
   * 获取数据集
   */
  const getData = (refresh : boolean) => {
    if (refresh) {
      page = 1
    } else {
      page++;
    }
    uni.showLoading({
      title: ''
    })
    isLoading.value = true
    // getProductList({
    //   page,
    //   rows,
    //   dataStateStr,
    //   goodsName: goodsName.value,
    //   channelName: channelName.value,
    //   classtreeCode
    // }).then((res : any) => {
    //   isLoading.value = false
    //   uni.hideLoading()
    //   console.log(res)
    //   total = res.total
    //   if (refresh) {
    //     datalist.value = res.list
    //   } else {
    //     res.list.forEach((item : any) => {
    //       datalist.value.push(item)
    //     })
    //   }
    // }).catch(e => {
    //   uni.hideLoading()
    //   isLoading.value = false
    // })
    queryFileCollectPage({
      dictTypeCode: 7,
      userCode: userInfo.userCode
    }).then((res : any) => {
      isLoading.value = false
      uni.hideLoading()
      console.log(res)
      total = res.total
      if (refresh) {
        datalist.value = res.list
      } else {
        res.list.forEach((item : any) => {
          datalist.value.push(item)
        })
      }
    }).catch(e => {
      uni.hideLoading()
      isLoading.value = false
    })

  }

  /**
    *
    */
  const itemClick = (item : any) => {
    uni.navigateTo({
      url: `/pages/product/productDetail?goodsCode=${item.rsResourceGoodsReDomain.goodsCode}`
    })
  }
  /**
   * 长按删除
   * @param {Object} item
   * @param {Object} index
   */
  function onLongPress(item : any, index : number) {
    console.log(index);
    uni.showModal({
      title: '提示',
      content: '确定删除该商品？',
      success: (res) => {
        if (res.confirm) {
          deleteFileCollectByCode({ "fileCollectCode": item.fileCollectCode }).then(res => {
            console.log(res);
            datalist.value.splice(index, 1);
          })
        }
      }
    });
  }
</script>

<style lang="scss">
  .viewport {
    display: flex;
    flex-direction: column;
    background-color: white;

  }

  .top_container {
    margin: 10rpx 15rpx;
    border-radius: 30rpx;
    border: 2rpx solid #61D7ED;
    // border-image: linear-gradient(180deg, rgba(97, 215, 237, 1), rgba(84, 185, 204, 1)) 2 2;
    display: flex;
  }


  .search_container {

    flex-direction: column;
    flex-grow: 1;
    padding: 12rpx 15rpx;
    border-radius: 20rpx;
    margin: 5rpx 20rpx;
  }

  .search_input {
    background-color: white;
    font-size: 28upx;
  }

  .screen_container {
    margin-top: 10rpx;
    padding-left: 10rpx;
    width: 100vw;
    display: flex;
    flex-direction: row;

  }



  .selelct {
    width: 35vw;
    border-radius: 10rpx;
    text-align: center;
    background-color: white;
    margin-right: 15rpx;
  }



  .lines {
    width: 1px;
    background-color: gray;
  }




  .nodata {
    display: flex;
    height: 80vh;
    align-items: center;
    flex-direction: column;

  }

  .no_data_img {
    margin-top: 25vh;
    height: 84rpx;
    width: 100rpx;
  }

  .no_data_text {
    margin-top: 30rpx;
    color: darkgray;
  }

  .item-container {
    margin-top: 20rpx;
    flex-grow: 1;
    background-color: #F9FAFB;
  }

  .item-right {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;

  }

  .right-container_title {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
  }

  .right-container {
    display: flex;
    flex-direction: row;
  }

  .right-title {
    height: 40rpx;
    min-width: 120rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: rgba(28, 37, 58, 0.65);
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .right-content {
    height: 40rpx;
    margin-left: 10rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: rgba(28, 37, 58, 0.65);
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }


  .case-item {
    display: flex;
    margin-top: 10rpx;
    padding: 20rpx 10rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 2rpx 2rpx 2rpx 2rpx;



    .image_container {
      position: relative;
      height: 240rpx;
      width: 240rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      border: 3rpx solid #00C1D1;
      overflow: hidden;
      /* 设置溢出隐藏 */

      .image_good {
        width: 100%;
        height: 320rpx;
      }

      .tag {
        text-align: center;
        line-height: 40rpx;
        height: 40rpx;
        width: 160rpx;
        left: 0;
        top: 0;
        color: white;
        font-size: 20rpx;
        position: absolute;
        border-top-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        background-color: #00C1D1;
      }

    }

    .text {
      text-align: left;
      margin-top: 40rpx;
      font-size: 24upx;
      color: #3d3d3d;
    }


  }

  .good_name {
    padding: 10rpx 6rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #394259;
    line-height: 44rpx;
    text-align: justified;
    font-style: normal;
    text-transform: none;
  }

  .button {
    position: fixed;
    left: 10%;
    bottom: 30rpx;
    width: 80%;
    background-color: #54B9CC;
    color: white;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }
</style>
